<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" charset="UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		
		<script type="text/javascript" src="js/vue.min.js"></script>
		<title></title>
		<style>
		.class2{
		  background: black;
		  color: white;
		}
		.active{
			width:3rem;height: 3rem;
			background: green;
		}
		.text-danger{
			background:red;
		}
		</style>
	</head>
	<body>
		<!--<div class="app">
			<h1 v-html="message"></h1>
		</div>-->
		<!--<div id="app">-->
			<!--v-bind-->
		  <!--<label for="r1">修改颜色</label>
		  <input type="checkbox" v-model="class2" id="r1">
		  <br><br>
		  <div v-bind:class="{'class2': class2}">
		    directiva v-bind:class
		  </div>-->
		  <!--/v-bind-->
			<!--2.表达式-->
			<!--{{5+5}}<br>
			{{ ok ? 'YES' : 'NO' }}<br>
			{{ message.split('').reverse().join('') }}
			<div v-bind:id="'list-' + id">菜鸟教程</div>-->
			<!--/表达式-->
		  	<!---->
		  	 <!--<p v-if="seen">现在你看到我了</p>-->
		  	<!---链接-->
		  	<!--<pre><a v-bind:href="url">这里是链接</a></pre>
		  	<div v-on:click="clickme">click me</div>
		  	<br>
		  	<form v-on:submit.prevent="onSubmit">
		  		<input type="submit" value="submit"/>
		  		<input type="button" value="button"/>
		  		<p>{{message}}</p>
		  		<input type="text" v-model="message" /><br />
		  		<div  v-html="message"></div>
		  	</form>-->
		  	<!--按钮的事件可以用v-on来监听，并对用户的输入进行相应-->
		  	<!--<p v-html="message2"></p>
		  	<button v-on:click="reverseMessage">反转字符串</button>
		  	<hr/>
		  	<form v-on:submit.prevent="onSubmit"></form>-->
		  	<!--过滤器-->
		  	 <!--{{ message | capitalize }}-->
		  	 <!--/过滤器-->
		  	 <!--v-for-->
		  	 <!--<ul>
		  	 	<li v-for="(index,key,value) in object">
		  	 		{{index}}.......{{key}}--{{value}}
		  	 	</li>
		  	 </ul>
		  	 <ul>
		  	 	<li v-for="value in object">
		  	 		{{value}}
		  	 	</li>
		  	 </ul>
		  	 <ul>
		  	 	<li v-for="n in 10">
		  	 		{{n}}
		  	 	</li>
		  	 </ul>-->
		  	 <!---->
		  	 <!--<div>
		  	 	 {{ message.split('').reverse().join('') }}
		  	 </div>-->
		  	 <!--翻转-->
		  	 **************************************************************
		  	 <!--<div>原文{{message}}</div>
		  	 <div>翻转后的文字{{reversedMessage}}</div>-->
		  	  <!--<p>{{ site }}</p>-->
		  	  <!--<div v-bind:class="{isred:isActive}"></div>-->
		  	  <!--<div v-bind:class="{active:isActive , 'text_danger':hasError}"></div>-->
		  	<div id="app">
				<div class="static"
				     v-bind:class="{ active: isActive, 'text-danger': hasError }">
				</div>
				<hr />
		  	  	<div class="static active text-danger"></div>
		  	  	<hr />
		  	  	<div v-bind:class="classObject"></div>
		  	  	<hr />
		  	  	<div v-bind:class="[activeClass, errorClass]"></div>
		  	  	<hr />
		  	  	<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
		  	  	<hr />
		  	  	
		  	  	<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
		  	  	
		  	  	<div v-bind:style="styleObject">菜鸟教程</div>
		  	  	<button v-on:click="count+=1">click me</button>
		  	  	<p>这个按钮被点击了{{count}}次</p>
		  	  	
		  	  	<div id="app">
				   	<!-- `greet` 是在下面定义的方法名 -->
				  	<button v-on:click="greet">Greet</button>
				  	<button v-on:click="say('hi')">say hi</button>
				  	<button v-on:click="say('what')">say what</button>
				  	
				  	<!-- 阻止单击事件冒泡 -->
				  	<a v-on:click.stop="doThis">stop</a>
					
						<!-- 提交事件不再重载页面 -->
						<form v-on:submit.prevent="onSubmit"></form>
						<!-- 修饰符可以串联  -->
						<a v-on:click.stop.prevent="doThat"></a>
						<!-- 只有修饰符 -->
						<form v-on:submit.prevent></form>
						<!-- 添加事件侦听器时使用事件捕获模式 -->
						<div v-on:click.capture="doThis">...</div>
						<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
						<!--<div v-on:click.self="doThat">...</div>-->
						
						<!-- click 事件至少触发一次，2.1.4版本新增 -->
						<a v-on:click.once="doThis"></a>
						<!---->
						<p><!-- Alt + C -->
						<input @keyup.alt.67="clear">
						<!-- Ctrl + Click -->
						<div @click.ctrl="doSomething">Do something</div>
				</div>
			</div>	
		
	
	
	
	<script>
//		document.querySelector("#slider1")//jQuery获取某个元素
		var vm = new Vue({
		  el: '#app',
		  data: {
			name: 'Google',
			url: 'http://www.google.com',
			isActive:true,
			hasError:true,
			activeClass:'active',
		  	errorClass:'text-danger',
			classObject:{
				active:true,
				'text-danger':true
			}
			,activeColor: 'green',
			fontSize: 30,
			styleObject:{
				color:"#f5ab24",
				fontSize:"30px"
				
			}
			,count:0
		  },
		  
		  computed: {
		  	
		    classObject: function () {
		      return {
		        active: this.isActive && !this.error,
		        'text-danger': this.error && this.error.type === 'fatal',
		      }
		    },
		
		    site: {
		      // getter
		      get: function () {
		        return this.name + ' ' + this.url
		      },
		      // setter
		      set: function (newValue) {
		        var names = newValue.split(' ')
		        this.name = names[0]
		        this.url = names[names.length - 1]
		      }
		    }
		  },
		  methods :{
		  	greet:function(){
		  			alert("hello"+this.name);
		  			if(event){
		  				alert(event.target.tagName);
		  			}
		  	},
		  	say:function(message){
		  		alert(message);
		  	},
		  	doThis:function(){
		  		alert(123);
		  	},
		  	clear:function(){
		  		alert('clear');
		  	},
		  	doSomething:function(){
		  		alert('do something');
		  	}
		   
		  }
		})
		
		// 调用 setter， vm.name 和 vm.url 也会被对应更新
		vm.site = '菜鸟教程 http://www.runoob.com';
		document.write('name: ' + vm.name);
		document.write('<br>');
		document.write('url: ' + vm.url);
		
		</script>	
<!--<script>
//			
	new Vue({
	  el: '#app',
	  data: {
	  	 	class2: false,
	    	ok: false,
	    	message: 'runoob',
	    	message2:"我是中国人！",
//	    	message:'<h1>hello vue.js!</h1>',
	    	id : 1,
	    	seen:false,
	    	name:'Google',
	    	url:"http://www.google.com",
	    	object:{
	    		name:"cake优选",
	    		url:"www.cakemall.com",
	    		slogan:"不出家门买蛋糕！"
	    	},
	    	clickme:function(){alert("hello world");},
	    	onSubmit:function(){
	    		alert("点击了button");
	    	}
	  },
	  methods:{
	  	reverseMessage:function(){
	  		this.message2 = this.message2.split("").reverse().join("")
	  	}
	  }
	  ,filters:{
	  	capitalize:function(value){
	  		if(!value) return ''
	  		
	  		value = value.toString()
	  		return value.charAt(0).toUpperCase()+value.slice(1);
	  	}
	  }
	  ,computed : {
	  	reversedMessage:function(){
	  		return this.message.split('').reverse().join("");
	  	}
	  }
	  
	 
	  
	})
</script>-->



	</body>
</html>
